<template>
    <div>
        <!-- head头 -->
        <van-sticky>
            <van-nav-bar class='bar_sty' left-text="高仿boss直聘">
                <van-icon name="plus" slot="right"
					@click=jobStateFn />
                <van-icon name="search" slot="right"/>
            </van-nav-bar>

            <div class='title_menu'>
                <van-button class ='miniBtn'  size="mini"
					@click='notifyBtnFn'>推荐</van-button>
                <van-button class ='miniBtn'  size="mini"
					@click='notifyBtnFn'>最新</van-button>

                <van-button style='float:right' class ='miniBtn'  
					size="mini" @click='openFilterMaskFn' >筛选</van-button>
                <van-button style='float:right' class ='miniBtn'  
					size="mini" @click='openMask'>{{cityDefault}}</van-button>
            </div>
			<!-- notify提示.此处要放在吸顶里面 -->
			<notify v-show='notify_show'></notify>
        </van-sticky>

        <!-- 职位列表 -->
        <div>
			<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
				<job_item v-for= "(n, inx) in jobsData"
					:itemObj=n  :key=inx />    
			</van-pull-refresh>   
        </div>

		<!-- 城市操作wrap -->
		<!-- @touchmove.prevent阻止mask拖动和滚动
			@mousewheel.prevent -->
    	<div v-show= 'is_cityMaskObj' :class='maskClassName'
			@touchmove.prevent
			@mousewheel.prevent >
			<selectArea @closeAreaFn='hideMaskFn($event)'></selectArea>
		</div>

		<!-- 筛选 -->
		<div v-show='is_filter' :class='filterClassName'
			@touchmove.prevent
			@mousewheel.prevent >
			<filter_wrap @closeFilterFn='hideFilterFn'></filter_wrap>
		</div>

		<!-- 管理求知意向 -->
		<div v-show='is_jobState' :class='jobStateClassName'
			@touchmove.prevent
			@mousewheel.prevent>
			<jobState @closeJobStateFn='hideJobState'></jobState>
		</div>

        <!-- 页面底部 -->
        <footer_bar></footer_bar>
    </div>
</template>

<script>
import job_item from './job_item'
import footer_bar from './footer_bar'
import notify from './notify'
import selectArea from './selectArea'
// import { Toast } from 'vant';
import filter_wrap from './filter_wrap'
import jobState from './jobState'

export default {
  name: 'index_jobList',
  components:{job_item,footer_bar,notify,selectArea,filter_wrap,jobState},
  data(){
      return{
			msg:'职位列表xxx',

			//选择城市的默认值
			cityDefault:'沈阳',
			//筛选
			is_filter:false,
			//用于查找筛选框的div，mask_filter没有样式
			filterClassName:'mask_filter',

			//求职意向
			is_jobState:false,
			jobStateClassName:'mask_animation',

			jobsData:
		[{
				title:'web前端',
				h2_txt:'什么祥 未融资',
				area:['沈阳 和平区','经验不限','本科'],
				hr:{
					img_avatar:'',
					hr_txt:'海峰-招聘者'
				},
				salary:'5-6K'
			},{
				title:'软件开发工程师',
				h2_txt:'牛万科技 未融资',
				area:['沈阳 沈河区','1-3年','学历不限'],
				hr:{
					img_avatar:'',
					hr_txt:'海峰-招聘者'
				},
				salary:'3-8K'
			},{
				title:'前端工程师',
				h2_txt:'成林健康科技 未融资',
				area:['沈阳 皇姑区','经验不限','本科'],
				hr:{
					img_avatar:'',
					hr_txt:'马xx-从事招聘专员'
				},
				salary:'5-6K'
			},{
				title:'前端开发工程师',
				h2_txt:'师福教育 未融资',
				area:['沈阳 沈河区','3-5年','学历不限'],
				hr:{
					img_avatar:'',
					hr_txt:'杨女士 - 人事'
				},
				salary:'5-8K'
			},{
				title:'前端工程师',
				h2_txt:'成林健康科技 未融资',
				area:['沈阳 皇姑区','经验不限','本科'],
				hr:{
					img_avatar:'',
					hr_txt:'马xx-从事招聘专员'
				},
				salary:'5-6K'
			},{
				title:'前端技术经理',
				h2_txt:'星擎科技 未融资',
				area:['沈阳 铁西区','5-10年','本科'],
				hr:{
					img_avatar:'',
					hr_txt:'潘舒-CEO'
				},
				salary:'6-11K'
			},{
				title:'web前端',
				h2_txt:'什么祥 未融资',
				area:['沈阳 和平区','经验不限','本科'],
				hr:{
					img_avatar:'',
					hr_txt:'海峰-招聘者'
				},
				salary:'5-6K'
		}],
			//提示组件
			notify_show: false,

			//下拉刷新
			isLoading: false,
			//城市筛选
			is_cityMaskObj:false,
			//城市界面的class
			//mask_aaa仅用于js找到这个div，没有其它用途
			maskClassName:'mask_aaa',
			}
  },
  methods:{
	  	notifyBtnFn(){
			  this.notify_show=true;
			  //要判断，当css3执行完成后,此处监听notify动画
			  let _notify= document.querySelector('.notify');
			//   console.log(_notify);
			//webkitAnimationEnd.是css3动画的‘动画结束’事件
			//webkitAnimationStart是css3动画的‘动画开始’事件
			_notify.addEventListener('webkitAnimationEnd',()=>{
				this.notify_show=false;
			})
		  },
		  //下拉刷新
		onRefresh(){
			setTimeout(()=>{
				this.$toast('刷新成功');
				this.isLoading= false;
			},1000)
		},
		//打开城市按钮方法
		openMask(){
			//找到这个选择城市界面的div
			// console.log(document.querySelector('.mask_aaa'))
			this.is_cityMaskObj= true;
			this.maskClassName=' mask_aaa cityEditWrapObj_open'
			
			//需要监听css3动画完成之后再隐藏
			let _cityMask= document.querySelector('.mask_aaa');
			_cityMask.addEventListener('webkitAnimationEnd',()=>{
				this.is_cityMaskObj= true;
			})
		},
		//关闭城市选择案板
		hideMaskFn(_city){
			this.maskClassName=' mask_aaa cityEditWrapObj_close';

			//需要监听css3动画完成之后再隐藏
			let _cityMask= document.querySelector('.mask_aaa');
			_cityMask.addEventListener('webkitAnimationEnd',()=>{
				this.is_cityMaskObj=false;
			})
			//  console.log(_city)
			if(_city !== undefined){
				this.cityDefault=_city;
			}else{
				this.cityDefault='沈阳';
			}
		},
		//筛选条件
		openFilterMaskFn(){
			//找到这个选择城市界面的div
			this.is_filter= true;
			this.filterClassName=' mask_filter filter_open'
			
			//需要监听css3动画完成之后再隐藏
			let _cityMask= document.querySelector('.mask_filter');
			_cityMask.addEventListener('webkitAnimationEnd',()=>{
				this.is_filter= true;
			})
			
		},
		//关闭筛选栏
		hideFilterFn(){
			this.filterClassName=' mask_filter filter_close';

			//需要监听css3动画完成之后再隐藏
			let _filterMask= document.querySelector('.mask_filter');
			_filterMask.addEventListener('webkitAnimationEnd',()=>{
				this.is_filter=false;
			})
		},
		//求职状态管理
		jobStateFn(){
			this.is_jobState=true;
			this.jobStateClassName='mask_animation animation_open';

			//需要监听css3动画完成之后再隐藏
			let _jobState= document.querySelector('.mask_animation');
			_jobState.addEventListener('webkitAnimationEnd',()=>{
				this.is_jobState= true;
			})
		},
		//求职状态管理关闭
		hideJobState(){
			this.jobStateClassName=' mask_animation animation_close';

			//需要监听css3动画完成之后再隐藏
			let _jobState= document.querySelector('.mask_animation');
			_jobState.addEventListener('webkitAnimationEnd',()=>{
				this.is_jobState=false;
			})
		}
  }
  
}
</script>


<style scoped>
.bar_sty{
	background: #14c1bb;
}
.van-icon-plus:before{
	color: #fff;font-size: .4rem;margin-right: .1rem;
	border-right: 1px solid #c1c1c1;padding-right: .1rem;
}
.van-icon-search:before{
	color: #fff;font-size: .4rem;
}
.van-nav-bar__text{
	font-size: .35rem;color: #fff;
}
.miniBtn{
	border:0;margin:.1rem 0 0 0;float:left;
}
.filterBtn{
	float: right;border:0;margin:.1rem .1rem 0 0;
	background: #f2f3f5;
}
.title_menu{background: #fff;height:0.6rem;}
.cityEditWrapObj_open{
	width: 100%;height: 100%;background: #fff;position: absolute;left: 0;bottom: 0;
	z-index: 3333;animation: cityEditWrapObjAnimation_open .7s;
}
.cityEditWrapObj_close{
	width: 100%;height: 100%;background: #fff;position: absolute;left: 0;bottom: 0;
	z-index: 3333;animation: cityEditWrapObjAnimation_close .7s;
}
.filter_open{
	width: 100%;height: 100%;background: #fff;position: absolute;left: 0;bottom: 0;
	z-index: 3333;animation: cityEditWrapObjAnimation_open .7s;
}
.filter_close{
	width: 100%;height: 100%;background: #fff;position: absolute;left: 0;bottom: 0;
	z-index: 3333;animation: cityEditWrapObjAnimation_close .7s;
}
@keyframes cityEditWrapObjAnimation_open{
	from {height:0;}
	to {height:100%;}
}
@keyframes cityEditWrapObjAnimation_close{
	from {height:100%;}
	to {height:0;}
}
.mask_animation{
	width: 100%;height: 100%;background: #fff;position: absolute;left: 0;bottom: 0;
	z-index: 3333;
}
.animation_open{
	animation: open_Animation .7s;
}
.animation_close{
	animation: close_Animation .7s;
}

@keyframes open_Animation{
	from {width:0;left:100%;}
	to {width:100%;left:0;}
}
@keyframes close_Animation{
	from {width:100%;left:0;}
	to {width:0;left:100%;}
}
</style>

